<template>
    <div class="index-box">
        <el-button type="primary" @click="showStaticBoard">打印</el-button>
        <div>
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column prop="date" label="一氧化碳">
                </el-table-column>
                <el-table-column prop="name" label="二氧化碳">
                </el-table-column>
                <el-table-column prop="name" label="乙烯">
                </el-table-column>
                <el-table-column prop="name" label="乙炔">
                </el-table-column>
                <el-table-column prop="name" label="甲烷">
                </el-table-column>
                <el-table-column prop="name" label="姓名">
                </el-table-column>
                <el-table-column prop="name" label="姓名">
                </el-table-column>

                <el-table-column prop="name" label="姓名">
                </el-table-column>
                <el-table-column prop="name" label="姓名">
                </el-table-column>
                <el-table-column prop="name" label="姓名">
                </el-table-column>
                <el-table-column prop="name" label="姓名">
                </el-table-column>


            </el-table>
        </div>
        <div id="produceRadio1" style="width: 500px; height: 300px;"> </div>
        <el-dialog class="dialog" title="预览" @open="handleDialogOpen" :visible.sync="StaticBoard" width="80%"
            style="margin-top: 10px !important;">
            <div id="printView">
                <div style="page-break-after:always" class="box">
                    <div id="produceRadio"> </div>
                    <div id="produceRadioo"></div>
                    <div class="table">
                        <table id="printable-table">
                            <thead>
                                <tr>
                                    <th>表头1</th>
                                    <th>表头2</th>
                                    <!-- 其他表头 -->
                                </tr>
                            </thead>
                            <tbody>
                                <!-- 表格数据行 -->
                                <tr v-for="(item, index) in tableData" :key="index">
                                    <td>{{ item.date }}</td>
                                    <td>{{ item.name }}</td>
                                    <!-- 其他数据 -->
                                </tr>

                            </tbody>
                        </table>
                    </div>
                    <div class="sign">

                        <div>
                            <div>制表：</div>
                            <div></div>
                        </div>

                        <div>
                            <div>通防部：</div>
                            <div></div>
                        </div>


                        <div>
                            <div>总工程师：</div>
                            <div></div>
                        </div>


                        <div>
                            <div>矿长：</div>
                            <div></div>
                        </div>
                    </div>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <!-- <el-button v-print="'#printView'" type="primary">打 印</el-button> -->
                <el-button v-print="printViewInfo" type="primary">打 印</el-button>
                <el-button @click="dialogVisible = false">取 消</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
import * as echarts from "echarts";
export default {
    components: {},
    data() {
        return {
            //展示静态看板的弹窗控制
            StaticBoard: false,
            msg: "打印",
            printViewInfo: {
                id: "printView", //打印区域的唯一的id属性
                popTitle: '孙店煤业报表打印', // 页眉文字 （不设置时显示undifined）（页眉页脚可以在打印页面的更多设置的选项中取消勾选）
                extraHead: '孙店煤业', // 最左上方的头部文字，附加在head标签上的额外标签，使用逗号分割
                preview: false, // 是否启动预览模式，默认是false （开启预览模式ture会占满整个屏幕，不建议开启，除非业务需要）
                previewTitle: '孙店煤业', // 打印预览的标题(预览模式preview为true时才显示)
                previewPrintBtnLabel: '预览结束，开始打印', // 打印预览的标题下方的按钮文本，点击可进入打印(预览模式preview为true时才显示)
                zIndex: 20002, // 预览窗口的z-index，默认是20002，最好比默认值更高
                previewBeforeOpenCallback(that) { console.log('正在加载预览窗口！'); console.log(that.msg, this) }, // 预览窗口打开之前的callback (预览模式preview为true时才执行) （that可以取到data里的变量值）
                previewOpenCallback() { console.log('已经加载完预览窗口，预览打开了！') }, // 预览窗口打开时的callback (预览模式preview为true时才执行)
                beforeOpenCallback() { console.log('开始打印之前！') }, // 开始打印之前的callback
                openCallback() { console.log('执行打印了！') }, // 调用打印时的callback
                closeCallback() { console.log('关闭了打印工具！') }, // 关闭打印的callback(无法区分确认or取消)
                clickMounted() { console.log('点击v-print绑定的按钮了！') },
                // url: 'http://localhost:8080/', // 打印指定的URL，确保同源策略相同
                // asyncUrl (reslove) {
                //   setTimeout(() => {
                //     reslove('http://localhost:8080/')
                //   }, 2000)
                // },
                standard: '',
                extarCss: ''
            },
            tableData: []
        }
    },
    mounted() {
        //此处使用nextTick仅为演示，如果不使用也会报错
        this.initSetBarChart2()
        this.tableData = [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
        }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
        },
        {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
        },

        {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
        },
        {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
        },
        {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
        },
        {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
        },
        {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
        },
        ]
    },
    methods: {
        showStaticBoard() {
            this.StaticBoard = true
            this.tableData = [{
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
            },
            {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
            },

            {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
            },
            {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
            },
            {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
            },
            {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
            },
            {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
            },
            {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
            },

            {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
            },

            {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
            },

            {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
            },

            {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
            },

            {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
            },

            {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
            },

            {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
            },

            {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
            },

            {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
            },

            {
                date: '2016-05-0111',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
            },
            ]
        },
        initSetBarChart2() {
            var myChart = echarts.init(document.getElementById("produceRadio1"))
            var option = {
                xAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: [150, 230, 224, 218, 135, 147, 260],
                        type: 'line'
                    }
                ]
            };
            myChart.setOption(option)
            console.log(option)
        },
        setBarChart2() {
            var myChart = echarts.init(document.getElementById("produceRadio"))
            var option = {
                xAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: [150, 230, 224, 218, 135, 147, 260],
                        type: 'line'
                    }
                ]
            };
            myChart.setOption(option)
            console.log(option)
        },
        setBarChart1() {
            var myChart = echarts.init(document.getElementById("produceRadioo"))
            var option = {
                xAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: [150, 230, 224, 218, 135, 147, 260],
                        type: 'bar'
                    }
                ]
            };
            myChart.setOption(option)
            console.log(option)
        },
        handleDialogOpen() {
            //dom完全挂载后调用
            this.$nextTick(() => {
                this.setBarChart2()
                this.setBarChart1()
            })
            console.log("this dialog is opened")
        },
    }

}
</script>

<style lang="less" scoped>
// #printView {
//   width: 100%;

//   border: 1px solid red;

// }
* {

    box-sizing: border-box;
}

@media print {

    /* 表格样式 */
    table {
        border-collapse: collapse;
        width: 100%;
    }

    th,
    td {
        border: 1px solid #ccc;
        padding: 8px;
        text-align: center;
    }

    thead {
        display: table-header-group;
        /* 表头始终显示 */
    }

    tfoot {
        display: table-footer-group;
        /* 表尾始终显示 */
    }

    tr {
        page-break-inside: avoid;
        /* 避免在页面断裂时打断表行 */
    }
}


#printView {
    width: 99%;

    margin: 0 auto;
}

#produceRadio {
    width: 90%;
    height: 300px;
    // border: 1px solid red;
    margin: 0 auto;
}

#produceRadioo {
    width: 90%;
    height: 300px;
    // border: 1px solid red;
    margin: 0 auto;
}

.table {
    width: 90%;
    margin: 20px auto;
    // border: 1px solid red;
}

.sign {
    width: 90%;
    height: 60px;
    // border: 1px solid red;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;

    >div {
        width: 200px;
        // border: 1px solid red;
        display: flex;
        margin: 0 10px;

        >div:nth-child(1) {
            width: 45%;
            text-align: right;
            // border: 1px solid red;
        }

        >div:nth-child(2) {
            width: 55%;
            border-bottom: 1px solid black;
        }
    }
}
</style>